<template>
  <div class="editor-column--cell-editor" :class="{'is-invalid': !isValid}" :title="validateMessage">
    <el-input type="text" v-model="value" :placeholder="editorPlaceholder" @blur="onBlur" @focus="onFocus"
              v-if="editorType === 'text'"></el-input>
    <el-input type="textarea" v-model="value" :placeholder="editorPlaceholder" @blur="onBlur" @focus="onFocus"
              v-else-if="editorType === 'textarea'"></el-input>
    <el-input type="password" v-model="value" :placeholder="editorPlaceholder" @blur="onBlur" @focus="onFocus"
              v-else-if="editorType === 'password'"></el-input>
    <el-input-number v-model="value" :placeholder="editorPlaceholder" @blur="onBlur" @focus="onFocus"
                     v-else-if="editorType === 'number'"></el-input-number>
    <el-select v-model="value" :placeholder="editorPlaceholder" @blur="onBlur" @focus="onFocus"
               v-else-if="editorType === 'select'">
      <el-option v-for="(item, idx) in editorItems" :value="item.value" :label="item.label" :key="idx"></el-option>
    </el-select>
    <el-radio-group v-model="value" :placeholder="editorPlaceholder" @blur="onBlur" @focus="onFocus"
                    v-else-if="editorType === 'radio'">
      <el-radio v-for="(item, idx) in editorItems" :value="item.value" :label="item.label" :key="idx"></el-radio>
    </el-radio-group>
    <el-checkbox type="password" v-model="value" :placeholder="editorPlaceholder" @blur="onBlur" @focus="onFocus"
                 v-else-if="editorType === 'checkbox'"></el-checkbox>
  </div>
</template>

<script>
export default {
  name: 'CellEditor',
  props: {
    field: {
      type: String,
      required: true
    },
    row: {
      type: Object,
      required: true
    },
    editorType: {
      type: String,
      default: 'text',
      validator(v) {
        return ['text', 'password', 'number', 'textarea', 'select', 'checkbox', 'radio'].indexOf(v) !== -1
      }
    },
    editorPlaceholder: {
      type: String,
      default: ''
    },
    editorValidator: {
      type: Function
    },
    editorItems: {
      type: Array
    }
  },
  inject: ['editorStore'],
  data() {
    return {
      isValid: true,
      validateMessage: '',
      editorValue: undefined,
      focusTimer: -1
    }
  },
  computed: {
    fieldValue() {
      return this.row[this.field]
    },
    editable() {
      return true
    },
    value: {
      get() {
        return this.editorValue === undefined ? this.fieldValue : this.editorValue
      },
      set(val) {
        this.editorValue = val
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const item = this.$el.querySelector('input.el-input__inner, input.el-input-number, textarea.el-textarea__inner')
      if (item) {
        item.focus()
        item.select()
      }
    })
  },
  methods: {
    onBlur() {
      this.$emit('blur')
    },
    onFocus() {
      if (this.isValid) {
        return
      }
      this.focusTimer = setTimeout(() => {
        this.validateMessage = ''
        this.isValid = true
      }, 500)
    },
    commitValue() {
      clearTimeout(this.focusTimer)
      if (this.editorValidator) {
        const result = this.editorValidator({
          row: this.row,
          field: this.field,
          value: this.value
        })
        if (result) {
          this.validateMessage = result
          this.isValid = false
          return false
        }
      }
      this.editorStore.setChange(this.row, this.field, this.value)
      return true
    }
  }
}
</script>

<style lang="less" scoped>
.editor-column--cell-editor {
  width: 100%;
}

.is-invalid /deep/ .el-input__inner,
.is-invalid /deep/ .el-textarea__inner {
  color: red;
  background-color: #faeded;
  //transition: color 618ms, background-color 618ms;
}

.el-input {

}
</style>
